<template>
  <div class="list-group-item list-group-item-light">
    <p class="option-text">{{letters[content.index]}}.&nbsp;{{content.text}}</p>
    <div>
      <button
        class="btn btn-custom"
        v-for="val in scores"
        :key="val.id"
        @click="setValue(val)"
        :class="{'btn-primary':isSelected(val),'btn-outline-primary':!isSelected(val)&&isAcceptable(val),'btn-outline-secondary':!isSelected(val)&&!isAcceptable(val)}"
      >{{val}}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Option",
  props: ["content", "left"],
  data() {
    return {
      value: 0,
      scores:[0,1,2,3,4,5,6,7,8,9,10],
      letters:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
    };
  },
  methods: {
    setValue(value) {
      if (this.isAcceptable(value)) {
        //window.console.log(this.content.type,value);
        let type = this.content.type;
        this.$emit("setValue", { type: type, value: value });
        this.value = value;
      } else {
        window.console.log("dismissed");
      }
    },
    isSelected(value) {
      return value == this.value;
    },
    isAcceptable(value) {
      return (
        value <= this.left ||
        value < this.value ||
        value - this.value <= this.left
      );
    }
  },
  computed: {},
  mounted() {
    //window.console.log(this.content);
    //window.console.log(this.left);
  }
};
</script>

<style scoped>
.btn-custom {
  padding: 0em;
  margin: 0.1em;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
}
.option-text {
  padding: 0.25em 0;
  margin: 0;
}
</style>